<template>
  <div>
    <div class="mb20 lh1">打印类型</div>
    <div class="ks-row-middle mb20 lh1">
      <el-select
        v-model="type"
        style="width: 100%"
        placeholder="请选择打印类型"
        filterable
        @change="changeConsoleType">
        <el-option
          v-for="item in options"
          :key="item.key"
          :label="item.label"
          :value="item.key"/>
      </el-select>
    </div>
    <template v-if="!['time','timeEnd'].includes(type)">
      <div class="ks-row-middle mb20 lh1">
        <div class="mr10">参数</div>
        <i
          v-if="!(type==='dir' && paramList.length > 0 )"
          class="el-icon-circle-plus-outline iconcolor f20 poi"
          @click="addParam"
        ></i>
      </div>
      <div
        class=" pr15 ell item"
        v-for="(param, index) in paramList"
        :key="index"
      >
        <div
          :key="index"
          style="min-height: 32px"
          class="ks-row-middle-between mb10">
          <span class="ell">参数{{ noToChinese(index + 1) }}</span>
          <span class="g6">
            <span
              class="iconfont iconicon_shanchu poi"
              @click="removeParams(index)"
            ></span>
          </span>

        </div>
      </div>
    </template>

  </div>
</template>

<script>

import { noToChinese } from '@/utils/util'
export default {
  name: 'ConsolePrint',
  props: {
    eventItem: {}, // 需要逻辑编排的对象
    componentItem: {},
    block: {},
    workspace: {}
  },
  components: {},
  computed: {
    type: {
      get () {
        const type = this.block?.getFieldValue('Type')
        const res = this.options.find(item => item.label === type)
        return res?.key || ''
      },
      set (val) {
        const res = this.options.find(item => item.key === val)
        const label = res?.label
        this.block.setFieldValue(label, 'Type')
      }
    }
  },
  data () {
    return {
      noToChinese,
      paramList: [],
      options: [
        { key: 'log', label: '提示信息' },
        { key: 'warn', label: '警告信息' },
        { key: 'error', label: '错误信息' },
        { key: 'dir', label: '检查对象' },
        { key: 'time', label: '计时开始' },
        { key: 'timeEnd', label: '计时结束' }
      ]
    }
  },
  watch: {
    'block': {
      handler () {
        this.getBlockData()
      },
      immediate: true
    }
  },
  methods: {
    getBlockData () {
      this.paramList = []
      for (let i = 0; i < this.block.itemCount_; i++) {
        const input = this.block.getInput(`ADD${i}`)
        this.paramList.push({ value: i + 1 })
      }
    },
    addParam () {
      this.paramList.push({ value: this.paramList.length + 1 })
      const rootBlock = this?.workspace?.getBlockById(this.block.id)
      rootBlock.itemCount_++
      rootBlock.updateShape_()
    },
    removeParams (index) {
      this.paramList.splice(index, 1)
      const rootBlock = this?.workspace?.getBlockById(this.block.id)
      // // 移除input并将 对应input中的积木从workspace删除
      const insideContent = rootBlock.getInputTargetBlock(`ADD${index}`)
      insideContent && insideContent.dispose()
      rootBlock.removeInput(`ADD${index}`)

      const targetInsideBlocks = [] // 保存之前的连接块
      for (let i = index + 1; i < rootBlock.itemCount_; i++) {
        const targetBlock = rootBlock.getInputTargetBlock(`ADD${i}`)
        targetInsideBlocks.push(targetBlock)
        rootBlock.removeInput(`ADD${i}`)
      }
      rootBlock.itemCount_--
      rootBlock.updateShape_()
      for (let i = 0; i < targetInsideBlocks.length; i++) {
        var connection = rootBlock.getInput(`ADD${index + i }`).connection
        const targetBlock = targetInsideBlocks[i]
        connection.connect(targetBlock.outputConnection)
      }
    },
    changeConsoleType (val) {
      if (val === 'dir') {
        // this.paramList = this.paramList.slice(0, 1);
        if (this.paramList.length > 1) {
          for (let i = this.paramList.length - 1; i > 0; i--) {
            this.removeParams(i)
          }
        }
        this.block.itemCount_ = 1
        this.block.updateShape_()
      } else if (val === 'time' || val === 'timeEnd') {
        if (this.paramList.length > 1) {
          for (let i = this.paramList.length - 1; i >= 0; i--) {
            this.removeParams(i)
          }
        }
        this.block.itemCount_ = 0
        this.block.updateShape_()
      }
    }
  }
}
</script>

<style scoped>

</style>
